<template>
<div class="base-info">
<!--	<div class="item" v-for="(value, key) in dataEnum" :key="key">-->
<!--		<p>{{ value }}：</p>-->
<!--		<p>{{ houseData[key] ?? '-' }}</p>-->
<!--	</div>-->
	<div class="item">
		<p>房屋编号：</p>
		<p>{{ houseData?.fwbh || '-' }}</p>
	</div>
	<div class="item">
		<p>户主姓名：</p>
		<input
			type="text"
			v-model="initData.hzxm"
		/>
		<van-icon name="edit" />
	</div>
	<div class="item">
		<p>房屋地址：</p>
		<input
			type="text"
			v-model="initData.address"
		/>
		<van-icon name="edit" />
	</div>
	<div class="item">
		<p>行政区划：</p>
		<p>{{ houseData?.region || '-' }}</p>
	</div>

  <template v-if="showLocation">
    <div class="item" v-for="(value, key) in locationEnum" :key="key">
      <p>{{ value }}：</p>
      <p>{{ locationInfo?.[key] ?? '-' }}</p>
    </div>
  </template>
</div>
</template>

<script setup>
import { ref, defineProps } from 'vue'

defineProps({
	houseData: {
		type: Object,
		default: () => {}
	},
	initData: {
		type: Object,
		default: () => {}
	},
  locationInfo: {
    type: Object,
    default: () => {
    }
  },
  showLocation: {
    type: Boolean,
    default: false
  }
})

const dataEnum = ref({
	'fwbh': '房屋编号',
	'hzxm': '户主姓名',
	'address': '房屋地址',
	'region': '行政区划',
})

const locationEnum = ref({
  address: '当前位置',
  lng: '经度',
  lat: '纬度',
})
</script>

<style scoped lang="less">
.base-info {
	padding: 32px 0;
	margin: 0 32px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
	border-radius: 8px;
	background: #fff;
	.item {
		display: flex;
		margin: 0 32px;
		&:nth-last-of-type(1) {
			border: 0;
		}
		p {
			line-height: 44px;
			&:nth-of-type(1) {
				color: var(--content-color);
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: var(--title-color);
			}
		}
	}
	input {
		width: 0;
		flex: 1;
		background: #f3f6f9;
		font-size: 28px;
	}
	i {
		font-size: 36px;
		line-height: 36px;
		margin-left: 4px;
	}
}
</style>
